<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .banner ul li:hover {
        color: greenyellow;
    }
    .box button:hover{
        color: purple;
    }
   
</style>

<body>
    <div class="box">
        <button>视频</button>
        <button>直播</button>
    </div>
    <div class="banner">
        <ul>
            <!-- <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ul>
    </div>
</body>

</html>
<script>
    var lis = [...document.querySelectorAll('li')]
    var arr = [
        { path: '/home', component: shouye },
        { path: '/service', component: shezhi },
        // { path: '/mine', component: yonghu },
    ]
    var ul = document.querySelector('ul')
    console.log(ul)
    var arr1 = [
        { '内容': 11111111 },
        { '内容': 22222222 },
        { '内容': 33333333 },
        { '内容': 44444444 },
        { '内容': 44444444 },
        { '内容': 44444444 },
        { '内容': 44444444 },
        { '内容': 44444444 },
        { '内容': 44444444 },
        { '内容': 44444444 },
    ]
    var arr2 = [
        { '内容': 66666666 },
        { '内容': 77777777 },
        { '内容': 88888888 },
        { '内容': 99999999 },
        { '内容': 99999999 },
        { '内容': 99999999 },
        { '内容': 99999999 },
        { '内容': 99999999 },
        { '内容': 99999999 },
        { '内容': 99999999 },
    ]
    var as = document.querySelectorAll('button')
    as.forEach((item, index) => {
        item.onclick = function (e) {
            e.preventDefault()

            history.pushState({}, '', arr[index].path);
            // console.log(location)
            arr[index].component()
        }
        // if()
    })

    function shouye() {
        document.querySelector('.banner ul').innerHTML = ''
        arr1.forEach((item) => {
            var li = document.createElement('li')
            console.log(item)
            for (var key in item) {
                // var td = document.createElement('td')
                li.innerHTML = item[key]
                ul.appendChild(li)
            }

        })
    }
    function shezhi() {
        document.querySelector('.banner ul').innerHTML = ''
        arr2.forEach((item) => {
            var li = document.createElement('li')
            console.log(item)
            for (var key in item) {
                // var td = document.createElement('td')
                li.innerHTML = item[key]
                ul.appendChild(li)
            }

        })
    }
    // function yonghu() {
    //     document.querySelector('.banner').innerHTML = '呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵'
    // }
</script>